<script type="text/javascript">
	Ext.ns('note');
	//add or edit form panel
	note.form = Ext.extend(Ext.form.FormPanel,{
		id:'form',
       	closable:true,
       	hidden:true,
       	bodyStyle:'padding:10px',
       	layout:'form',
       	labelWidth:60,
		initComponent:function(){
			this.items = this.buildItems();
			this.buttons = this.buildButtons();
			note.form.superclass.initComponent.call(this);
		},
		buildItems:function(){
			return [{
				xtype:'textfield',
				fieldLabel:'Category',
				name:'category'
			},{
               	hideLabel:true,
           		xtype:'textarea',
               	name:'content',
               	width:750,
               	height:500,
            }];
		},
		buildButtons:function(){
			return [{
				text:'保存'
			},{
				text:'取消',
				handler:function(){
					Ext.getCmp('form').destroy();
				}
			}];
		}
	});
    Ext.onReady(function(){
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
		//笔记数据源
		var store = new Ext.data.Store({
			proxy:new Ext.data.HttpProxy({url:"<%=$this->createUrl('post/index')%>"}),
			reader:new Ext.data.JsonReader({
				root:'root',
				totalProperty:'total'
			},['id', 'title',"category",'add_time',"update_time"]),
			autoLoad:true,
			baseParams:{limit:10,start:0}
		});
		//主体部分多页签
		var tabs = new Ext.TabPanel({
			region:'center',
			deferredRender:true,
			activeTab:0,
		});
        //分类
		var categorys = new Ext.tree.TreePanel({
			region: 'west',
			title:"Categorys",
			split: true,
			width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins: '0 0 0 5',
            layout: {
                type: 'accordion',
                animate: true
            },
			root:{
	            nodeType: 'async',
	            draggable: false,
	            id: 0
	        },
			rootVisible:false,
			loader:new Ext.tree.TreeLoader({dataUrl:"<%=$this->createUrl('category/index')%>"}),
			listeners:{
				click:function(n){
					store.setBaseParam("cid", n.attributes.id);
					store.setBaseParam("start", 0);
					store.load();
					tabs.findById('note_list').show();
				}
			}
		});

		//笔记列表
		var noteList = new Ext.grid.GridPanel({
			title:"Note list",
			id:'note_list',
			store:store,
			columns:[
			    {header:"Category",dataIndex:"category",width:100},
			    {header:"Title",dataIndex:"title",width:300},
			    {header:"Up Time",dataIndex:"update_time",width:120},
			    {header:"Add Time",dataIndex:"add_time",width:120},
			    {
			    	xtype: 'actioncolumn',
				    items:[{ //查看
					    icon:"<%=Helper::getUrl('images/view.png')%>",
					    handler: function(grid, rowIndex, colIndex) {
	                        var rec = store.getAt(rowIndex);
	                        //获取文章
	                        Ext.Ajax.request({
	                            method:'post',
	                            url:"<%=$this->createUrl('post/view')%>",
	                            success:function(response,config){
	                                var json = Ext.util.JSON.decode(response.responseText);
	                                var id = 'post_' + rec.get('id');
	                                var tab = tabs.findById(id);
	                                if (tab) tab.destroy();
	                                tabs.add({
		                                id:id,
		                                title:json.title,
		                                html:json.content,
		                                closable:true,
		                                autoScroll:true
		                            }).show();
	                                SyntaxHighlighter.highlight();
	                            },
	                            failure:function(){
	                                alert("no");
	                            },
	                            params:{id:rec.get('id')}
	                        });
	                    }
					},{ //删除
						icon:"<%=Helper::getUrl('images/delete.png')%>",
						handler: function(gird, rowIndex, colIndex) {
							var rec = store.getAt(rowIndex);
							alert("Delete " + rec.get("id"));
						}
					}]
				}
			],
			tbar:[{
				text:'Add',
				handler:function(){
					var form = new note.form;
					form.setTitle('Add');
					tabs.add(form).show();
				}
			}],
			bbar:new Ext.PagingToolbar({
				pageSize:10,
				store:store,
				displayInfo:true,
			})
		});
        tabs.add(noteList);
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<p>我的笔记本</p>'
                }
            }),categorys,tabs]
        });
    });
</script> 